<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>监控任务列表</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="shortcut icon" href="${ctx }/ico/favicon.ico">
<link href="${ctx }/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="${ctx }/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<!-- jqgrid-->
<link href="${ctx }/css/plugins/jqgrid/ui.jqgrid.css?0820"
	rel="stylesheet">
<link href="${ctx }/css/animate.css" rel="stylesheet">
<link href="${ctx }/css/common.css" rel="stylesheet">
<link href="${ctx }/css/style.css?v=4.1.0" rel="stylesheet">
<!-- Sweet Alert -->
<link href="${ctx }/css/plugins/sweetalert/sweetalert.css"
	rel="stylesheet">
<link
	href="${ctx}/css/plugins/bootstrap-select/bootstrap-select.min.css"
	rel="stylesheet" />
	<!-- bootstrap-switch css -->
<link href="${ctx}/css/plugins/bootstrap-switch/bootstrap-switch.css"
	rel="stylesheet">
</head>
<body class="gray-bg">
	<div class="animated fadeInRight">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox ">
					<div class="ibox-content">
						<div class="row m-b-sm m-t-sm">
							<div class="col-md-11">
								<div class="input-group">
									<button class="btn btn-success btn-outline commonbtn" type="button"
										id="addTask">
										<i class="fa fa-plus"></i> 添加
									</button>
									<button class="btn btn-success btn-outline commonbtn" type="button"
										id="editTask">
										<i class="fa fa-pencil"></i> 编辑
									</button>
									<button class="btn btn-success btn-outline commonbtn" type="button"
										id="delTask">
										<i class="fa fa-trash"></i> 删除
									</button>
									<!-- <input type="text" placeholder="请输入任务名称"
										class="input-sm form-control"
										style="float: right;height:100%;width:50%" id="search">
									<span class="input-group-btn"><button type="button"
											class="btn btn-sm btn-sm btn-primary" id="searchBtn">搜索</button>
									</span> -->
								</div>
							</div>
						</div>
						<div class="jqGrid_wrapper">
							<table id="table_list"></table>
							<div id="pager_list"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


	<!-- 添加菜单模态窗口 -->
	<div class="modal inmodal" id="addTaskWin" tabindex="-1" role="dialog"
		aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content animated bounceInRight">
				<div class="modal-header">
					<button type="button" class="close closeWin" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
					</button>
					<h5 class="modal-title">监控任务配置</h5>
				</div>
				<div class="ibox-content">
					<form class="form-horizontal m-t" id="addTaskForm">
						<input id="pk_dict_id" name="pk_dict_id" type="hidden" value="${pk_dict_id}">
						<input id="pk_scene_id" name="pk_scene_id" type="hidden" value="${pk_scene_id}">
						<div class="form-group">
							<label class="col-sm-3 control-label">任务名称：</label>
							<div class="col-sm-8">
								<input id="jobName" name="jobName" class="form-control"
									required="" aria-required="true" type="text">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">监控时间：</label>
							<div class="col-sm-8">
									<select class="selectpicker" required="" aria-required="true"
									name="cronExpression" id="cronExpression">
									<option value="0 */1 * * * ?">每隔1分钟执行一次</option>
									<option value="0 */2 * * * ?">每隔2分钟执行一次</option>
									<option value="0 */5 * * * ?">每隔5分钟执行一次</option>
									<option value="0 */10 * * * ?">每隔10分钟执行一次</option>
									<option value="0 */15 * * * ?">每隔15分钟执行一次</option>
									<option value="0 */30 * * * ?">每隔30分钟执行一次</option>
									<option value="0 */60 * * * ?">每隔60分钟执行一次</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">接口类：</label>
							<div class="col-sm-8">
								<select class="selectpicker" required="" aria-required="true"
									name="jobClassName" id="jobClassName">
									<option value="">--请选择--</option>
									<c:forEach items="${list}" var="dictInfo">
										<option value="${dictInfo.dictcode}">${dictInfo.dictname}</option>
									</c:forEach>
								</select>
							</div>
						</div>
							<div class="form-group">
							<label class="col-sm-3 control-label">起始系统：</label>
							<div class="col-sm-8">
								<input id="initial_system" name="initial_system" class="form-control"
									 type="text">
							</div>
						</div>
							<div class="form-group">
							<label class="col-sm-3 control-label">目标系统：</label>
							<div class="col-sm-8">
								<input id="target_system" name="target_system" class="form-control"
									 type="text">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">监控开关：</label>
							<div class="col-sm-2">
								<div class="switch has-switch">
									<div id="share_switch_div" class="switch-on switch-animate">
										<input id="share_switch_input" name="share_switch_input"
											type="checkbox" checked="checked">
									</div>
								</div>
								<input id="monit_switch" name="monit_switch" type="hidden">
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-8 col-sm-offset-3">
								<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
								<button type="submit" class="btn btn-primary">保存</button>
							</div>
						</div>
					</form>
				</div>

			</div>
		</div>
	</div>
	<!--end 添加代码模态窗口 -->


	<!-- 修改代码模态窗口 -->
	<div class="modal inmodal" id="editTaskWin" role="dialog"
		aria-hidden="true">
		<iframe id="editTaskFrame" width="100%" height="100%"
			frameborder="0"></iframe>
	</div>
	<!--end 修改菜单模态窗口 -->

	<!-- 全局js -->
	<script src="${ctx }/js/jquery.min.js?v=2.1.4"></script>
	<script src="${ctx }/js/bootstrap.min.js?v=3.3.6"></script>

	<!-- Peity -->
	<script src="${ctx }/js/plugins/peity/jquery.peity.min.js"></script>

	<!-- jqGrid -->
	<script src="${ctx }/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
	<script src="${ctx }/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>

	<!-- jQuery Validation plugin javascript-->
	<script src="${ctx }/js/plugins/validate/jquery.validate.min.js"></script>
	<script src="${ctx }/js/plugins/validate/messages_zh.min.js"></script>

	<!-- layer javascript -->
	<script src="${ctx }/js/plugins/layer/layer.min.js"></script>
	<!-- jQuery form-->
	<script src="${ctx }/js/jquery.form.js"></script>
	<!-- 自定义js -->
	<script src="${ctx }/js/content.js?v=1.0.0"></script>
	<!-- Sweet alert -->
	<script src="${ctx }/js/plugins/sweetalert/sweetalert.min.js"></script>
	<script
		src="${ctx}/js/plugins/bootstrap-select/bootstrap-select.min.js"></script>
	<!-- bootstrap-switch js -->
	<script src="${ctx }/js/plugins/bootstrap-switch/bootstrap-switch.js"></script>
	<script>
		$(document).ready(function() {
			$.jgrid.defaults.styleUI = 'Bootstrap';
			//绑定表格数据
			$("#table_list").jqGrid({
				url : "${ctx }/scheduler/task/loadDataGrid?pk_scene_id=${pk_scene_id}&pk_dict_id=${pk_dict_id}",
				datatype : "json",
				height : "calc(100% - 265px)",
				autowidth : true,
				shrinkToFit : true,
				multiselect : true,
				multiboxonly : true,
				rowList : [ 10, 20, 30 ],
				root : "rows",
				colNames : [ '任务ID','业务场景','任务名称', '时间表达式', '接口类','运行状态','监控开关','创建时间' ],
				colModel : [
					
				{
					name : 'pk_task_id',
					width : '25%',
					hidden:true
				}, 
				{
					name : 'scene_name',
					width : '25%'
				}, 
				{
					name : 'jobName',
					width : '25%'
				}, 
				{
					name : 'cronExpression',
					width : '20%'
				}, 
				{
					name : 'jobClassName',
					width : '20%'
				}, 
				{
					name : 'triggerState',
					width : '15%'
				}, 
				{
					name : 'monit_switch',
					width : '15%',
					formatter : function(cellvalue, options, rowObject) {
						var return_value="";
						if(cellvalue==1){
							return_value="<a class='btn btn-primary btn-rounded'>运行</a>";
						}else{
							return_value="<a class='btn btn-danger btn-rounded'>关闭</a>";
						}
						return return_value;
					}
				}, {
					name : 'create_time',
					width : '24%',
					formatter : function(cellvalue, options, rowObject) {
						return formatDateString(cellvalue);
					}
				} ],
				sortable : true,
				sortname : 'create_time',
				sortorder : 'asc',
				pager : "#pager_list",
				caption : "监控任务列表",
			});
		});

		// jqGrid 自动调整宽度
		$(window).bind('resize', function() {
			var width = $('.jqGrid_wrapper').width();
			$('#table_list').setGridWidth(width);
		});

		function beforeSelectRow() {
			$("#jqgridId").jqGrid('resetSelection');
			return (true);
		}

		//绑定查询事件
		$("#searchBtn").click(function() {
			var searchString = $("#search").val();
			$("#table_list").jqGrid('setGridParam', {
				url : "${ctx }/scheduler/task/loadDataGrid",
				postData : {
					'task_name' : searchString
				}, //发送数据 
				page : 1
			}).trigger("reloadGrid"); //重新载入 
		});

		//绑定add表单提交事件,异步提交表单
		$('#addTaskForm').submit(function() {
			var fromUrl = "${ctx}/scheduler/task/addJob";
			$.ajax({			
				type : "post",
				url : fromUrl,
				data : $('#addTaskForm').serialize(),
				success : function(data) {			
				if (data.errcode == "0")
					{
					layer.alert(data.errmsg,{icon : 1},
					function(index) {				
						//刷新表格数据		
						$("#table_list").trigger("reloadGrid");
						//清空表单数据														
						$("#addTaskForm :input").not(":button, :submit, :reset, :hidden")																
						.val("").removeAttr("checked").remove("selected");		
						//关闭add窗口										
						$('#addTaskWin').modal('hide');												
						//关闭提示框														
						layer.close(index);														
					});												
						} else {												
							layer.alert(data.errmsg, {icon : 2	})													
						}											
				   },
				   error : function() {			
						layer.alert('元件库配置失败！', {
							icon : 2
						});
						}
					});
					return false;
				});

		//绑定修改按钮事件
		$('#addTask').click(function() {
			$('#addTaskWin').modal('show');
		});

		//绑定修改按钮事件
		$('#editTask').click(
				function() {
					var selectedId = $("#table_list").jqGrid("getRowData",$("#table_list").jqGrid("getGridParam", "selarrrow")).pk_task_id;
					if (selectedId == null || selectedId == "") {
						layer.alert('请选择一项！', {
							icon : 0
						});
						return;
					}
					var frameSrc = "${ctx}/scheduler/task/editJob?pk_task_id="+ selectedId;
					$("#editTaskFrame").attr("src", frameSrc);
					$('#editTaskWin').modal('show');
				});

		function editWinClose(flag) {
			if (flag == "0") {
				$("#table_list").trigger("reloadGrid");
			}
			//关闭edit窗口
			$("#editTaskFrame")[0].contentWindow.document.write('');
			$("#editTaskFrame")[0].contentWindow.close();
			$('#editTaskWin').modal('hide');
		}

		//绑定删除事件
		$('#delTask').click(
				function() {
					var selectedIds = $("#table_list").jqGrid("getGridParam",
					"selarrrow");
					var ids = "";
					var v_jobNames="";
					for (var i = 0; i < selectedIds.length; i++) {
						 var v_pk_scene_id=($("#table_list").jqGrid("getRowData",selectedIds[i])).pk_task_id;
						  if (ids != '') ids += ',';
							ids += v_pk_scene_id;
						 var v_jobName=($("#table_list").jqGrid("getRowData",selectedIds[i])).jobName;
							  if (v_jobNames != '') v_jobNames += ',';
							  v_jobNames += v_jobName;
					}
					if (selectedIds == "") {
						layer.alert('请选择一项！', {
							icon : 0
						});
						return;
					}
					swal({
						title : "您确定要删除这条信息吗",
						text : "删除后将无法恢复，请谨慎操作！",
						type : "warning",
						showCancelButton : true,
						confirmButtonColor : "#DD6B55",
						confirmButtonText : "删除",
						closeOnConfirm : false
					}, function() {
						$.ajax({
							type : "post",
							dataType : "json",
							url : "${ctx }/scheduler/task/batchJob",
							data : {'ids':ids,'jobNames':v_jobNames},
							success : function(data) {
								if (data.errcode == "0") {
									//刷新表格数据
									$("#table_list").trigger("reloadGrid");
									swal("删除成功！", "您已经永久删除了这条信息。", "success");
								} else {
									swal("删除用户失败！", "您未删除这条信息。", "error");
								}
							},
							error : function() {
								swal("删除用户失败！", "您未删除这条信息。", "error");
							}
						});
					});
				});
		function formatDateString(date) {
			if (date == '' || date == undefined) {
				return '';
			} else {
				var d = new Date();
				d.setTime(date);
				var year = d.getFullYear();
				var month = d.getMonth() + 1;
				if (month * 1 < 10)
					month = '0' + month;
				var date = d.getDate();
				if (date * 1 < 10)
					date = '0' + date;
				var hours = d.getHours();
				if (hours * 1 < 10)
					hours = '0' + hours;
				var m = d.getMinutes();
				if (m * 1 < 10)
					m = '0' + m;
				var s = d.getSeconds();
				if (s * 1 < 10)
					s = '0' + s;
				return year + "-" + month + "-" + date + " " + hours + ":" + m
						+ ":" + s;
			}
		}
		 
			//监控开关
			$('#share_switch_div input').bootstrapSwitch({
				onText : "ON",
				offText : "OFF",
				onColor : "primary",
				offColor : "danger",
				size : "small",
				state : false,
				onInit : function(event, state) {//初始化开关
					$("#monit_switch").val("0");
				},
				onSwitchChange : function(event, state) {//开关状态发生改变时
					if (state == true) {
						$("#monit_switch").val("1");
					} else {
						$("#monit_switch").val("0");
					}
				}
			});
	</script>
</body>
</html>